<template>
  <AForm :model="formState" name="basic" @finish="onFinish">
    <AFormItem name="userName" :rules="rules.userName">
      <AInput v-model:value="formState.userName" placeholder="请输入用户名">
        <template #prefix>
          <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </AInput>
    </AFormItem>

    <AFormItem name="password" :rules="rules.password">
      <AInputPassword v-model:value="formState.password" placeholder="请输入密码">
        <template #prefix>
          <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
        </template>
      </AInputPassword>
    </AFormItem>

    <AFormItem name="remember">
      <ACheckbox v-model:checked="formState.remember">记住账号</ACheckbox>
    </AFormItem>

    <AFormItem>
      <AButton class="login-form-button" type="primary" html-type="submit" :loading="loading">登录</AButton>
    </AFormItem>
  </AForm>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { useUserStore } from '@/store';

const userStore = useUserStore();

const rules = {
  userName: [{ required: true, message: '请输入用户名!' }],
  password: [{ required: true, message: '请输入密码!' }]
};
const loading = ref(false);
const formState = reactive({
  userName: 'admin',
  password: '',
  remember: true
});
const onFinish = async (values) => {
  loading.value = true;
  userStore.loginByUserName(values).finally(() => {
    loading.value = false;
  });
};
</script>

<style lang="scss" scoped>
.login-form-button {
  width: 100%;
}
</style>
